<%-- 
    Document   : subjectList
    Created on : 2015-4-23, 11:55:17
    Author     : ppc
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/import.jspf"%>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title>热门话题</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
       <meta name="author" content="WangCaixia_gz none"/>
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/0522wap1_1/topic.css">
        
    </head>

    <body class="g-doc" id="Jlazy_img">
       <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="8235" />
        </jsp:include>
       <!-- 公共头部 --> 
        <%@include file="../common/intf6007.html" %>
        <!-- 公共头部end -->
        <!-- 公共头部 S -->
 
        <div class="header-bg">
    <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
    <div class="header-title">
        <span class="header-title-nav">
            全部话题 
        </span>
    </div>
</div>
        <!-- 公共头部 E -->
   <div class="tab1" id="Jswipe">
    <div class="swipeTab">
        <a class="current">本周话题</a>
        <a class="">全部话题</a>
    </div>
    <div class="swipeWrap">
        <div class="swipeCon">
            <div class="swipeMod" id="weekList">
 
                  <c:forEach items="${pager2.resultList}" var="subject" varStatus="st">
                     <a href="${WAPROOT}/topic/${subject.subjectId}.html" class="item">
                        <img width="60" height="60" class="pic"  src="${empty subject.logo ? subject.defaultLogo : subject.logo}">
                        <div class="title"><em>${fn:escapeXml(subject.title)}</em><span><c:if test='${pager2.pageNo == 1 && st.count<4}'>top</c:if>${st.count+(pager2.pageNo-1)*pager2.pageSize }</span></div>
                        <div class="sum"><em>发起人:</em><i>${fn:escapeXml(subject.createName)}</i></div>
                        <div class="sum"><em>阅读:</em><i>${subject.pvCount}</i><em>讨论:</em><i>${subject.replyCount}</i></div>
                     </a>              
                   <c:set var="rank" value="${st.count+(pager2.pageNo-1)*pager2.pageSize }"></c:set>
                  </c:forEach>
                    <c:forEach items="${subjects}" var="subject" varStatus="st">
                     <a href="${WAPROOT}/topic/${subject.subjectId}.html" class="item">
                       <img width="60" height="60" class="pic"  src="${empty subject.logo ? subject.defaultLogo : subject.logo}">
                       <div class="title"><em>${fn:escapeXml(subject.title)}</em><span><c:if test='${rank+st.index+1 <4}'>top</c:if>${rank+st.index+1}</span></div>
                       <div class="sum"><em>发起人:</em><i>${fn:escapeXml(subject.createName)}</i></div>
                       <div class="sum"><em>阅读:</em><i>${subject.pvCount}</i><em>讨论:</em><i>${subject.replyCount}</i></div>
                     </a>
                   </c:forEach>
                   <c:if test="${pager2.pageNo<pager2.pageCount}">
                         <a href="javascript:;" id="J-loadmore2" class="loadmore">
                            <i data-txt="点击加载更多" class="">点击加载更多</i>
                        </a>
                   </c:if>
            </div>
            <div class="swipeMod" id="allList">
            <c:forEach items="${pager.resultList}" var="subject" varStatus="st">
              <a href="${WAPROOT}/topic/${subject.subjectId}.html" class="item">
                    <img width="60" height="60" class="pic" src="" src2="${empty subject.logo ? subject.defaultLogo : subject.logo}">
                    <div class="title"><em>${subject.title}</em><span><c:if test='${pager.pageNo == 1 && st.count<4}'>top</c:if>${st.count+(pager.pageNo-1)*pager.pageSize }</span></div>
                    <div class="sum"><em>发起人:</em><i>${fn:escapeXml(subject.createName)}</i></div>
                    <div class="sum"><em>阅读:</em><i>${subject.pvCount}</i><em>讨论:</em><i>${subject.replyCount}</i></div>
              </a>
            </c:forEach>
                   <c:if test="${pager.pageNo<pager.pageCount}">
                   <a href="javascript:;" id="J-loadmore1" class="loadmore">
                            <i data-txt="点击加载更多" class="">点击加载更多</i>
                        </a>
                   </c:if>

            </div>


        </div>
    </div> 
    
</div>


        <!-- 公共底部 --> 
         <%@include file="../common/intf5987.html" %>
         <!-- 公共底部end --> 
        <script type="text/javascript" src="http://js.3conline.com/wap/2013/common/js/zepto1.1.min.js" ></script>
        <script type="text/javascript">
            var url = "${WAPROOT}/subject/listHotSubject.do";
            var url2 = "${WAPROOT}/subject/listCurrentWeekSubject.do";
            var newA = '<a href="{subjectUrl}" class="item"> <img width="60" height="60" class="pic" src="{logo}">'
                      +'<div class="title"><em>{title}</em><span>{rank}</span></div>'
                      +' <div class="sum"><em>发起人:</em><i>{createName}</i></div>'
                      +' <div class="sum"><em>阅读:</em><i>{pvCount}</i><em>讨论:</em><i>{replyCount}</i></div>'
                      +' </a>';
            var pageNo = 1;
            var pageSize = 5;
            var pageNo2 = 1;
            var pageSize2 = 5;
            // 修复active
            document.addEventListener("touchstart", function(){}, true);
            
            $('#J-loadmore1').click(function(event){
                $('.swipeWrap').css('height','auto');
                var ele = $(this).find('i');
                // 先判断是不是在加载状态,若是初次点击 则给予loading动画，并在此处处理ajax，屏蔽掉多次点击
                // 加载成功后去掉class loading
                if(!ele.hasClass('loading')){
                    // load动画
                    ele.attr('data-txt',ele.html());
                    ele.html('');
                    ele.addClass('loading');
                    getSubjectList(++pageNo,pageSize);
                }
            });
            $('#J-loadmore2').click(function(event){
                $('.swipeWrap').css('height','auto');
                var ele = $(this).find('i');
                // 先判断是不是在加载状态,若是初次点击 则给予loading动画，并在此处处理ajax，屏蔽掉多次点击
                // 加载成功后去掉class loading
                if(!ele.hasClass('loading')){
                    // load动画
                    ele.attr('data-txt',ele.html());
                    ele.html('');
                    ele.addClass('loading');
                    getHotSubjectList(++pageNo2,pageSize2);
                }
            });
            function loadingAfter(){
                var ele = $('#J-loadmore1').find('i');
                if(ele.hasClass("loading")){
                    ele.html(ele.attr('data-txt'));
                    ele.removeClass('loading');
                    var curHeight = $("#J-loadmore1").parent().height();
                    $('.swipeWrap').height(curHeight);
                }
            }
            
            function loading2After(){
                var ele = $('#J-loadmore2').find('i');
                if(ele.hasClass("loading")){
                    ele.html(ele.attr('data-txt'));
                    ele.removeClass('loading');
                    var curHeight = $("#J-loadmore2").parent().height();
                    $('.swipeWrap').height(curHeight);
                }
            }
            /*各种提示*/
            function showTips(msg){
                var tips = document.getElementById('Jtips');
                if(!tips) {
                    tips = document.createElement('div');
                    tips.id = 'Jtips';
                    tips.className = 'm-tips';
                    document.body.appendChild(tips);
                }
                tips.innerHTML = msg;
                tips.style.display = 'block';
                var tips_width = tips.clientWidth/2;
                tips.style.marginLeft = '-'+tips_width+'px';
                tips.style.opacity = 1;    
                setTimeout(function(){
                    tips.style.webkitTransition = 'all 0.3s ease-in';
                    tips.style.opacity = 0;
                    tips.style.marginTop = '-80px';
                    setTimeout(function(){
                        tips.style.display = 'none';
                        tips.style.marginTop = '-40px';
                    }, 300);
                }, 2000);
            }
            function getSubjectList(pageNo,pageSize){
                $.getJSON(url,{pageNo:pageNo,pageSize:pageSize},function(data){
                    if(data.code==0){
                        var html = templateHtml(data.data);
                        $("#J-loadmore1").before(html);
                        if(data.pageNo == data.pageCount){
                            $("#J-loadmore1").hide();
                        }
                    }
                    loadingAfter();
                },"json");
            }
            function getHotSubjectList(pageNo,pageSize){
                $.getJSON(url2,{pageNo:pageNo,pageSize:pageSize},function(data){
                    if(data.code==0){
                        var html = templateHtml(data.data);
                        $("#J-loadmore2").before(html);
                        if(data.pageNo == data.pageCount){
                            $("#J-loadmore2").hide();
                        }
                    }
                    loading2After();
                },"json");
            }
            function templateHtml(data){
                var html = "";
                if(data && data.length>0){
                    var len = data.length;
                    for(var i = 0 ;i<len;i++){
                        var result = data[i];
                        var subjectUrl = "${WAPROOT}/topic/"+result.subjectId+".html";
                        html+= newA.replace(/{subjectUrl}/ig,subjectUrl).replace(/{title}/ig,result.title).replace(/{pvCount}/ig,result.pvCount).replace(/{replyCount}/ig,result.replyCount).replace(/{logo}/ig,result.logo).replace(/{createName}/ig,result.createName).replace(/{rank}/ig,result.rank);
                    }
                }
                return html;
            }
        </script>
    <script src="http://js.3conline.com/wap/common/swipe.extend-min.js"></script>
	<script>
	function swipeTabA(elem) {
	    var wrap = elem.querySelector("div.swipeWrap"),
	        nav = elem.querySelector("div.swipeTab");
		    swipe(wrap, {
		        speed: 100,
		        nav: nav,
		        callback : function(index, elem) {
		            elem.parentNode.parentNode.style.height = (elem.clientHeight || elem.offsetHeight) + "px";
		        }
		    });
	}
	swipeTabA(document.getElementById('Jswipe'));
	</script>
    
    </body>
</html>